<template>
    <div class="card">
        <div class="card-header " :class="{'line-bottom':HLine}">
            <div class="card-title" v-if="cardTitle">{{cardTitle}}</div>
            <router-link :tag=" brandLink==='' ? 'div' : 'a'"
                         :to="brandLink"
                         :class="{'has-arrow':brandLink}"
                         class="brand"
                         v-if="brandLogo && brandName">
                <div class="logo" :style="{backgroundImage:'url(' + brandLogo + ')'}" v-if="brandLogo!=null"></div>
                <div class="name">{{ brandName }}</div>
            </router-link>
      			<slot name="top-left"></slot>
      			<div class="right">
      				<span class="note" v-if="RText">{{RText}}</span>
      				<slot name="top-right"></slot>
      			</div>
        </div>
        <div class="card-media" v-if="imgSrc">
    			<img :src="imgSrc" alt="">
    		</div>
        <slot></slot>
        <div class="card-body">
            <slot name="content"></slot>
            <slot name="text-block"></slot>
        </div>
        <slot class="card-footer" name="card-footer"></slot>
    </div>
</template>

<script>
export default {
  name: 'Card',
  props:{
      cardTitle:String,
      imgSrc:String,
      HLine : {
          type:Boolean,
          default: false
      },
      brandLogo : {
          type:String,
          default: 'static/img/image.jpg'
      },
      brandName : {
          type:String,
          default:''
      },
      brandLink : {
          type:String,
          default:''
      },
	  RText:String

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.card
  background: #fff
  // box-shadow: 0 2px 8px rgba(#000, 0.06);
  margin-bottom: 15px
  .card-header
    padding: 0 $spacing
    height: 44px
    display: flex
    align-items: center
    justify-content: space-between
    font-size: $font-md
    color: $text-dark
    .card-title
      font-weight: bold
      line-height: 1
      border-left: 4px solid $primary
      padding-left: 5px
    .brand
      font-size: $font-md
      display: flex
      align-items: center
      color: $text-dark
      position: relative
      .logo
        width: 24px
        height: 24px
        margin-right: 5px
        background-repeat: no-repeat
        background-position: center
        background-size: cover
      .name
        flex: 1
      &.has-arrow
        color: $text-grey
        &:after
          border-color: $text-grey
          width: 6px
          height: 6px
    .right
      margin-left: 10px
      span
        font-size: $font-sm
        color: $text-light
  .card-media
    position: relative
    text-align: center
    img
      max-width: 100%
  .card-body
    > p
      line-height: 1.8
      color: $text-grey
      font-size: 14px
      font-weight: 300
      padding: $spacing
    .swiper-container
      padding: $spacing 0
    .weui-cell
      margin-bottom: 10px
      &:after
        content: none
  .card-footer
    padding: 0 $spacing
    height: 44px
    display: flex
    justify-content: space-between
    align-items: center
    background: #fff
    fine-border(top, $border-light)
    span
      font-size: 12px
      color: $text-light

</style>
